import React, { PureComponent } from 'react'
import { connect } from 'react-redux'

import { TopicWrapper, TopicItem } from '../style'

class Topic extends PureComponent {
  render() {
    const { list } = this.props
    return (
      <TopicWrapper>
        {list.map(item => (
          <TopicItem key={item.get('id')}>
            <img
              className="topic-pic"
              src={item.get('imgUrl')}
              alt={item.get('title')}
            />
            <span>{item.get('title')}</span>
          </TopicItem>
        ))}
        <TopicItem className="more">
          <span>更多热门专题</span>
          <i className="sky-leaf">&#xe62b;</i>
        </TopicItem>
      </TopicWrapper>
    )
  }
}

/* 获取数据 */
const mapState = state => ({
  list: state.getIn(['home', 'topicList'])
})

export default connect(
  mapState,
  null
)(Topic)
